<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2016/6/23
  Time: 17:32
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>支付接口调用DEMO</title>
    <meta content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width" name="viewport">
    <link rel="stylesheet" href="static/bootstrap-3.3.5/css/bootstrap.css"/>
    <script type="text/javascript" src="static/jquery/jquery-3.0.0.js"></script>
    <script type="text/javascript" src="static/bootstrap-3.3.5/js/bootstrap.js"></script>
</head>
<body>
<div class="container">
    <fieldset>
        <form method="post" id="pay-form" role="form" class="form-horizontal">
            <legend>支付接口调用DEMO</legend>

            <div class="form-group">
                <label for="cardNo" class="col-sm-2 control-label">银行卡号：</label>
                <div class="col-sm-8">
                    <input class="form-control" type="text" name="cardNo" id="cardNo" placeholder="请输入银行卡号"
                           value="${pay.cardNo}">
                </div>
            </div>
            <div class="form-group">
                <label for="merOrderId" class="col-sm-2 control-label">商户订单号：</label>
                <div class="col-sm-8">
                    <input class="form-control" type="text" name="merOrderId" id="merOrderId" placeholder="请输入商户订单号"
                           value="${pay.merOrderId}">
                </div>
            </div>
            <div class="form-group">
                <label for="transAmt" class="col-sm-2 control-label">金额：</label>
                <div class="col-sm-8">
                    <input class="form-control" type="text" name="transAmt" id="transAmt" placeholder="请输入金额"
                           value="${pay.transAmt}">
                </div>
            </div>
            <div class="form-group">
                <label for="sms" class="col-sm-2 control-label">短信验证码：</label>
                <div class="col-sm-3">
                    <input class="form-control" type="text" name="sms" id="sms" placeholder="请输入短信验证码">
                </div>
                <div class="col-sm-offset-5 row">
                    <input type="button" id="sms-btn" class="btn btn-primary"  value="短信验证码"/>
                    <span id="sms-info" style="color:red"></span>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                    <button type="button" id="pay-btn" class="btn btn-info">支付</button>
                </div>
            </div>
            <div class="form-group">
                <label for="pay-result" class="col-sm-2 control-label">支付结果：</label>
                <div class="col-sm-8">
                    <textarea id="pay-result" class="col-sm-10 form-control" rows="5"></textarea>
                </div>
            </div>
        </form>
    </fieldset>


</div>
</body>
<script type="text/javascript">
    $(function () {

        if (!$("#sms").val())
            $("#pay-btn").attr("disabled", "disabled");

        $("#sms").on("input", function () {
            console.log($("#sms").val().length);
            if ($("#sms").val())
                $("#pay-btn").removeAttr("disabled", "");
            else
                $("#pay-btn").attr("disabled", "disabled");
        });

        $("#sms-btn").click(function () {
            var o = this;
            $.ajax({
                url: "pay/do_sms",
                type: "post",
                dataType: "json",
                data: {
                    cardNo: $("#cardNo").val(),
                    merOrderId: $("#merOrderId").val(),
                    transAmt: $("#transAmt").val()
                },
                success: function (data) {
                    if (data.status == "success" && data.flag) {
                        //$("#sms-info").append(data.data[0].msg)

                        $("#sms-info").html(data.data[0].msg)
                        get_code_time(o, data.data[0].msg);
                        setTimeout(function () {
                            $("#sms-info").html("");
                        }, 59999)
                    }
                },
                error: function (e) {
                }
            })
        });

        $("#pay-btn").click(function () {
            $.ajax({
                url: "pay/do_pay",
                type: "post",
                dataType: "json",
                data: {
                    merOrderId: $("#merOrderId").val(),
                    sms: $("#sms").val()
                },
                success: function (data) {
                    $("#pay-result").html(JSON.stringify(data.data[0]));

                },
                error: function (e) {
                    $("#pay-result").html(JSON.stringify(e));
                }
            });
        });

        var wait = 60;
        get_code_time = function (o) {
            if (wait == 0) {
                o.removeAttribute("disabled");
                o.value = "短信验证码";
                wait = 60;
            } else {
                o.setAttribute("disabled", true);
                o.value = "(" + wait + ")秒后重新获取";
                wait--;
                setTimeout(function () {
                    get_code_time(o)
                }, 1000)
            }
        }
    })
</script>
</html>

